<template>
    <view class="load" v-if="!load">
        <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view class="friends" v-else>
        <view class="list wap" v-if="Array.isArray(msglist) && msglist.length > 0">

            <view class="listBox" v-for="(item, index) in msglist" :key="index"
                @click="nav_to('/pages/teacher/detail?id=' + item.ID)">
                <view class="leftbox">
                    <image :src="item.PhotoUrl" class="hdimg" mode="aspectFill"></image>
                    <image v-if="item.Level == '网红'" class="level"
                        src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720434183138387.png"
                        mode="widthFix">
                    </image>

                </view>
                <view class="rightbox">
                    <view class="namebox">
                        <view class="name hiddenText">{{ item.TrueName }}</view>
                        <view class="addrebox">
                            <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png"
                                class="addimg"></image>
                            <text class="Place">{{ item.City || '未知' }}</text>
                        </view>
                    </view>
                    <view class="flexbox">
                        <text class="title_2">等级：</text>
                        <text class="title_2">{{ item.Level || '' }}</text>
                    </view>
                    <view class="flexbox">
                        <text class="title_2">擅长：</text>
                        <text class="title_2">{{ item.Skills || '' }}</text>
                    </view>
                    <view class="flexbox">
                        <text class="title_2">常驻：</text>
                        <text class="title_2">{{ (item.ShopName ? item.ShopName : '未知') }}</text>
                    </view>
                    <view class="flexbox_2">
                        <view class="pricebox">
                            <view class="price">{{ item.Price }}</view>
                            <view class="unit">元/小时</view>
                        </view>
                        <view class="btnBox">
                            <view class="btn_" @click.stop="auditItem(item, -1, index)">
                                拒绝
                            </view>
                            <view class="btn_ btn_soild" @click.stop="auditItem(item, 1, index)">
                                同意
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else>
            <u-empty mode="list" width="100" height="100"
                icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
                iconSize="32" text="暂无消息"></u-empty>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            load: false,
            list: [],
            _freshing: true,
            msglist: [],
            PageIndex: 1,
            readList: [],
            xtNum: 0,
            isMore: true,
        };
    },
    async onShow() {
    },
    onLoad() {
        this.getMsgList()
    },
    onReachBottom() {
        if (this.isMore) {
            this.PageIndex++;
            this.getMsgList();
        }
    },
    methods: {
        //下拉刷新
        async onRefresh() {
            this.freshLoad = true;
            this.getMsgList()
        },

        async getMsgList() {
            let res = await this.$api.post('Technicians/PeddingAuditList', {
                PageIndex: this.PageIndex,
                PageSize: 50
            });
            if (res.code == 0) {
                this.msglist = this.PageIndex == 1 ? this.msglist = res.data : this.msglist.concat(res.data)
            }
            this.xtNum = res.data.length;
            setTimeout(() => {
                this.load = true;
            }, 1000);

            this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;

            return true;
        },
        //同意或拒绝该用户成为教练(1 同意  -1 拒绝 )
		async auditItem(item, status, index) {
			let _this = this;
			let text = status == 1 ? '同意' : '拒绝'
			let content = `确定要${text}${item.TrueName}成为教练吗？`
			uni.showModal({
				title: '温馨提示',
				content: content,
				confirmText: text,
				success: async function (rs) {
					if (rs.confirm) {
						_this.apiSignComfirm(item.ID, status, index)
					} else if (rs.cancel) {
					}
				}
			});

		},
        // 调用审核教练接口
		async apiSignComfirm(id, status, index) {
			this.$api.post('Technicians/Audit', {
				ID: id,
				Status: status
			}).then(res => {
				const { code, data, message } = res
				if (code == 0) {
                    this.msglist.splice(index, 1)
					this.$pv.msg('操作成功');
				} else {
					this.$pv.msg(message);
				}

			});

		},
    }
};
</script>

<style lang="scss">
.friends {
    /deep/ .uni-list-chat {
        background: #111;
    }

    /deep/ .uni-list--border-top {
        background: #333;
    }

    /deep/ .uni-list--border-top {
        background: #333;
    }

    /deep/ .uni-list-chat__content-title {
        color: #fff;
    }

    /deep/ .uni-list-chat__content-note {
        color: #eee;
    }

    /deep/ .uni-list-chat__header-image {
        border-radius: 50%;
    }

    /deep/ .uni-list-chat__header {
        border: none;
    }
}

.item {
    position: relative;
    height: 150rpx;
    align-items: center;
    // border-bottom: 1px solid #fff;
}

.cover {
    position: relative;
    height: 100rpx;
    width: 100rpx;
    background: #444;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }

    .red {
        display: flex;
        height: 20rpx;
        width: 20rpx;
        background: #fc4b65;
        position: absolute;
        top: 5rpx;
        right: 5rpx;
        border-radius: 200rpx;
    }
}

.hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.ft {
    margin-top: 10rpx;
}

.nav {
    height: 44px;

    .nav_left {
        margin-top: 7px;
        height: 30px;
        line-height: 30px;
        font-size: 32rpx;
        color: #fff;
        width: 200rpx;
        display: flex;
        align-items: center;

        // justify-content: center;
        text {
            padding-left: 10rpx;
            font-size: 32rpx;
            color: #fff;
            font-weight: bold;
        }
    }
}

.c1 {
    color: #333;
}

.c2 {
    color: #999;
}

.btnBox {
    display: flex;
    align-items: center;

    .btn_ {
        margin-left: 16rpx;
        font-size: 24rpx;
        color: #333333;
        padding: 10rpx 32rpx;
        border-radius: 50rpx;
        border: 2rpx solid #E4E4E4;
    }

    .btn_soild {
        color: #fff;
        background: #706EEE;
        border: 2rpx solid #706EEE;
    }
}

.listBox {
    width: 702rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    margin: 0 auto;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;

    .leftbox {
        width: 204rpx;
        height: 256rpx;
        position: relative;
        // margin: 24rpx 22rpx 0 30rpx;
        margin-right: 22rpx;

        .status {
            width: 90rpx;
            height: 32rpx;
            background: #F4822E;
            border-radius: 0rpx 16rpx 0rpx 16rpx;
            text-align: center;
            line-height: 32rpx;
            color: #fff;
            font-size: 22rpx;
            position: absolute;
            top: 0;
            right: 0;
        }

        .hdimg {
            width: 100%;
            height: 100%;
            background-color: #706eee;
            border-radius: 18rpx;
        }

        .level {
            width: 72rpx;
            height: 72rpx;
            position: absolute;
            top: 0;
            left: 0;
        }

        .evaluabox {
            width: 100%;
            height: 44rpx;
            background-color: rgba(255, 255, 255, 0.85);
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            border-radius: 0 0 16rpx 16rpx;

            .title {
                color: #333333;
                font-size: 20rpx;
                margin: 0 12rpx;
            }

            .xing {
                width: 20rpx;
                height: 20rpx;
                margin-right: 4rpx;
            }
        }
    }

    .rightbox {
        flex: 1;
        padding-right: 10rpx;
        box-sizing: border-box;

        .namebox {
            display: flex;
            align-items: center;

            .name {
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
                margin-right: 8rpx;
                max-width: 250rpx;
            }

            .level {
                width: 80rpx;
                // height: 32rpx;
                border-radius: 8rpx;
                border: 2rpx solid #FF7713;
                text-align: center;
                // line-height: 32rpx;
                color: #FF7108;
                font-size: 26rpx;
                margin-right: auto;
                white-space: nowrap;
            }

            .addrebox {
                display: flex;
                align-items: center;

                .addimg {
                    width: 32rpx;
                    height: 32rpx;
                }

                .Place {
                    color: #666666;
                    font-size: 24rpx;
                    white-space: nowrap;
                }
            }

        }

        .flexbox {
            display: flex;
            // align-items: center;
            margin-top: 12rpx;

            .title_2 {
                color: #666666;
                font-size: 24rpx;

                &:first-child {
                    min-width: 72rpx;
                }
            }
        }

        .flexbox_2 {
            display: flex;
            align-items: center;
            margin-top: 22rpx;

            .pricebox {
                display: flex;
                align-items: center;
                margin-right: auto;

                .price {
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #FC201C;
                    margin-right: 6rpx;
                }

                .unit {
                    font-size: 24rpx;
                    color: #FC201C;
                }
            }

            .bookbtn {
                width: 136rpx;
                height: 60rpx;
                border-radius: 8rpx;
                background-color: #706eee;
                font-size: 24rpx;
                font-weight: bold;
                color: #fff;
                text-align: center;
                line-height: 60rpx;
            }
        }
    }
}
</style>